<!Doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<style>
.big{
    width: 300px;
    height: 30px;
    background-color: #ccc;
}
.small{
    width: 0;
    height: 30px;
    background-color: pink;
}
</style>
<body>
<div class="big">
    <div class="small"></div>
</div>
<span></span>
</body>
<script>
var big = document.querySelector(".big");
var small = document.querySelector(".small");
var span = document.querySelector("span");
big.onmousedown = function(e){
    var e = e || window.event;
    var x = e.offsetX;
    small.style.width = x + "px"
    var percent = parseInt(x/big.offsetWidth*100)
    span.innerText = percent
    big.onmousemove = function(e){
        var e = e || window.event;
        var x = e.offsetX;
        small.style.width = x + "px"
        var percent = parseInt(x/big.offsetWidth*100)
        span.innerText = percent
    }
}

document.onmouseup = function(){
    big.onmousemove = null
}
</script>
</html>